<html>
<head>
<style>
    .border{
        background: gray;
    }
    .red{
        background: red;
    }
    .orange{
        background: orange;
    }
    .yellow{
        background: yellow;
    }
    .green{
        background: green;
    }
    .qing{
        background: #9A9AF3;
    }
    .blue{
        background: blue;
    }
    .purple{
        background: purple;
    }
    .taohong{
        background: #e79af3;
    }
</style>
</head>
<body>
<h1 id="show">11 + 5 = 17<h1>
<table border="1" style="font-size:50px;">
<tr>
<th class="border" onClick="returnMe(this)">c</th>
<th class="border" onClick="returnMe(this)">x</th>
<th class="border" onClick="returnMe(this)">%</th>
<th class="border" onClick="returnMe(this)">/</th>
</tr>
<tbody>
<tr>
<td class="red" onClick="returnMe(this)">1</td>
<td class="orange" onClick="returnMe(this)">2</td>
<td class="yellow" onClick="returnMe(this)">3</td>
<th class="border" onClick="returnMe(this)">*</th>
</tr>
<tr>

<td class="green"  onClick="returnMe(this)">4</td>
<td class="qing"  onClick="returnMe(this)">5</td>
<td class="blue"  onClick="returnMe(this)">6</td>
<td class="border"  onClick="returnMe(this)">-</td>
</tr>
<tr>

<td class="purple"  onClick="returnMe(this)">7</td>
<td class=""  onClick="returnMe(this)">8</td>
<td class="taohong"  onClick="returnMe(this)">9</td>
<td class="border"  onClick="returnMe(this)">+</td>
</tr>
<tr>
<td class="border"  onClick="returnMe(this)">?</td>
<td class="border"  onClick="returnMe(this)">0</td>
<td class="border"  onClick="returnMe(this)">.</td>
<td class="border"  onClick="returnMe(this)">=</td>
</tr>
</tbody>
<table>

<script>
function returnMe(dom){
    var str = dom.getInnerHTML()
    var h1 = document.getElementById("show")
    if(str == 'c'){
        h1.innerHTML = ''
        return;
    }
    if(str == '='){
        h1.innerHTML = eval(h1.getInnerHTML())
        return;
    }
    h1.innerHTML = h1.getInnerHTML() + str
    
}
</script>

</body>
</html>